<template>
    <el-dialog
        title="请输入用户名称"
        v-model="state.visible"
        :before-close="close"
        align-center
        width="25%"
    >
        <el-form
            :model="state.ruleForm"
            :rules="state.rules"
            label-width="95px"
            ref="personnelForm"
        >
            <el-form-item label="用户名称" prop="userName">
                <el-input
                    size="large"
                    v-model="state.ruleForm.userName"
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close" size="large">取 消</el-button>
                <el-button type="primary" size="large" @click="determinate"
                    >确 定</el-button
                >
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue'
import Cabinet from '@/api/cabinet/Cabinet'
import { requestedMessage } from '@/utils/asynchronous'

/**
 * 设备地址
 */
const productCategory = JSON.parse(localStorage.getItem('machine'))
const currentMachine = ref(productCategory[0].ip)

const state = reactive({
    visible: false,
    boxNum: 0,
    ruleForm: {
        userName: ''
    },
    rules: {
        userName: [
            { required: 'true', message: '请输入用户名称', trigger: 'blur' }
        ]
    }
})

// 开启弹窗
const open = (boxNum) => {
    state.visible = true
    state.boxNum = boxNum
    state.ruleForm.userName = ''
}

// 关闭弹窗
const close = () => {
    state.visible = false
}

/**
 * 远程开箱
 */
function determinate() {
    requestedMessage(async () => {
        const { message, msg } = await Cabinet.RemoteDoorOpening(
            currentMachine.value,
            {
                boxNum: state.boxNum,
                userName: state.ruleForm.userName
            }
        )
        close()
        return msg
    })
}

defineExpose({ open, close })
</script>